<template>
        <div style="text-align: center;margin:0 20px">
            <div style="margin-top: 150px">
                <div style="font-size: 25px;font-weight: bolder" >登录</div>
                <label style="margin-top: 50px;font-size: 13px;color: gray">请先登录系统</label>
                <div style="margin-top: 50px">
                    <el-input v-model="form.username" type="text" placeholder="请输入用户名或邮箱登录">
                        <template #prefix>
                            <el-icon><User /></el-icon>
                        </template>
                    </el-input>
                    <el-input v-model="form.password" style="margin-top: 10px" type="password" placeholder="请输入密码">
                        <template #prefix>
                            <el-icon><Lock /></el-icon>
                        </template>
                    </el-input>
                </div>
                <el-row>
                    <el-col :span="12" style="text-align: left">
                        <el-checkbox  v-model="form.remember" label="记住我" size="large" />
                    </el-col>
                    <el-col :span="12" style="text-align: right">
                        <el-link @click="router.push('/forget')" href="">忘记密码</el-link>
                    </el-col>
                </el-row>
                <div>
                    <el-button @click="login()" style="margin-top:35px;width: 150px" type="success" plain>火速登录</el-button>
                </div>
                <el-divider>
                    <span style="color: gray;font-size: 13px">没有账号</span>
                </el-divider>
                <div>
                    <el-button @click="router.push('/register')" style="width: 150px" type="warning" plain>润去注册</el-button>
                </div>
            </div>
        </div>

</template>

<script setup>
import {Lock, User} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {get, post} from "@/net";
import router from "@/router";
import {reactive} from "vue";
import {useStore} from "@/stores";

//获取表单数据
const form = reactive(
    {
        username:'',
        password:'',
        remember:false
    }
)

const store = useStore()
const login = () => {
    if(!form.username || !form.password) {
        ElMessage.warning('请填写用户名和密码！')
    } else {
        post('/api/auth/login', {
            username: form.username,
            password: form.password,
            remember: form.remember
        }, (message) => {
            ElMessage.success(message)
            get('/api/user/me', (message) => {
                store.auth.user = message
                router.push('/index')
            }, () => {
                store.auth.user = null
            })
        })
    }
}

</script>

<style scoped>

</style>